<!-- “资讯服务→游记欣赏” 组件 -->
<template>
  <div class="img-zoom">

    <div
      class="img-zoom-all"
      :class="{imgZoomBorder: showBorder}"
      v-for="item in sightseeingTabData"
      :key="item.id"
      @click="toPlayStrategyDetail(item)">
      <div class="img-range">
        <img class="img-zoom-con" v-lazy="item.firstImg" alt="">
      </div>

      <div class="title">{{item.title}}</div>

      <p class="img-zoom-span">{{item.intro}}</p>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    sightseeingTabData: {
      type: Array,
      default: () => []
    },
    showBorder: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
    }
  },
  components: {},
  computed: {},
  created () {},
  mounted () {},
  methods: {
    toPlayStrategyDetail (item) {
      this.$emit('toPlayStrategyDetail', item)
    }
  }
}

</script>

<style lang='stylus' rel='stylesheet/stylus' scoped>
.img-zoom {
  width 100%
  // min-height 600px
}
.imgZoomBorder {
  border 1px solid #ddd
}
.img-zoom-all {
  margin 10px
  position relative
  width 380px
  height 435px
  display inline-block
  &:hover {
    .img-range {
      .img-zoom-con {
        transform scale(1.2)
      }
    }
  }
}
.img-range {
  overflow hidden
  width 380px
  height 270px
  .img-zoom-con {
    overflow hidden
    width 380px
    height 270px
    transition transform 1s
  }
}
.title {
  padding 5px 0
  border-bottom 1px solid #dddddd
  height 50px
  line-height 50px
  font-size 16px
  font-weight bold
  width 90%
  margin 0 auto
}
.img-zoom-span {
  height 85px
  line-height 1.5
  overflow hidden
  padding 5px 10px
  text-align left
  overflow hidden
  text-overflow ellipsis
  white-space: unset
  display -webkit-box
  -webkit-line-clamp 4
  -webkit-box-orient vertical
}
/** 方法二 animate */

// img:hover {
//   animation imgScale 2s
// }
// @keyframes imgScale {
//   from {
//     width 200px
//     height 200px
//   }
//   to {
//     width 240px
//     height 240px
//   }
// }
</style>
